<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2023/4/8
  Time: 17:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to my website</title>
    <link rel="stylesheet" type="text/css" href="<c:url value="/static/css/Login.css"/>">
    <link rel="stylesheet" type="text/css" href="<c:url value="/static/css/tooltip.css"/>">
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script src="static/js/Login.js" charset="UTF-8"></script>
</head>

<body>
<!-- 最外部容器 -->
<div class="container">
    <!-- 登录容器 -->
    <div class="container login">
        <!-- 表单 -->
        <form class="form" id="login_form" method="post">
            <div class="row">
                <h2 class="form_title">账号登录</h2>
                <!-- 中间分割线 -->
                <div class="vl">
                    <span class="vl-innertext"></span>
                </div>
                <!-- 其他登录方式 -->
                <div class="col">
                    <button class="login_button_else" id="qqLogin_button" onclick="alert('qq登录');">
                        <img class="button_icon" id="qq_img" src="<c:url value="/static/css/img/01_qq_logo.png"/>" />
                        登录
                    </button>
                    <button class="login_button_else" id="weChatLogin_button" onclick="alert('微信登录')">
                        <img class="button_icon" id="weChat_img" src="<c:url value="/static/css/img/Wechat_logo.png"/>" />
                        微信登录
                    </button>
                    <button class="login_button_else" id="zfbLogin_button" onclick="alert('支付宝登录')">
                        <img class="button_icon" id="zfb_img" src="<c:url value="/static/css/img/zfb_logo.png"/>" />
                        支付宝登录
                    </button>
                </div>

                <div id="tip">
                    <p style="text-align: center;">或手动登录</p>
                </div>
                <!-- input -->
                <div class="col">
                    <input type="text" class="form_input" name="username_in" id="username_in" placeholder="账号" required>
                    <input type="password" class="form_input" name="password_in" id="password_in" placeholder="密码" required>
                    <button type="submit" class="form_button" id="login_button">登录</button>
                </div>
                <!-- 转跳链接 -->
                <div class="col1">
                    <a class="form_link logon_link" id="login2logon">（&nbsp;&nbsp;注册账号&nbsp;&nbsp;）</a>
                </div>
                <div class="col1">
                    <a class="form_link resetPwd_link" id="login2resetPwd">（&nbsp;&nbsp;忘记密码&nbsp;&nbsp;）</a>
                </div>
            </div>
        </form>
    </div>
    <!-- 注册容器（初始不可见） -->
    <div class="container logon nodisplay">
        <!-- 表单 -->
        <form class="form" id="logon_form" method="post">
            <div class="row">
                <h2 class="form_title">账号注册</h2>
                <div class="vl">
                    <span class="vl-innertext"></span>
                </div>
                <div class="col">
                    <input type="text" class="form_input" id="username_on" placeholder="账号" required>
                    <input type="password" class="form_input" id="password_on" placeholder="密码" required>
                    <input type="tel" class="form_input" id="telephone_on" placeholder="手机号" required>
                </div>
                <div class="col">
                    <input type="email" class="form_input" id="email_on" placeholder="电子邮箱" required>
                    <input type="date" class="form_input" id="birthday_on" placeholder="生日" required>
                    <button type="submit" class="form_button" id="logon_button">注册</button>
                </div>
                <div class="col1">
                    <a class="form_link login_link" id="logon2login">（&nbsp;&nbsp;返回登录&nbsp;&nbsp;）</a>
                </div>
                <div class="col1">
                    <a class="form_link resetPwd_link" id="logon2resetPwd">（&nbsp;&nbsp;忘记密码&nbsp;&nbsp;）</a>
                </div>
            </div>
        </form>
    </div>
    <!-- 密码重置容器（初始不可见） -->
    <div class="container resetPwd nodisplay">
        <!-- 表单 -->
        <form class="form" id="resetPwd_form" method="post">
            <div class="row">
                <h2 class="form_title">密码重置</h2>
                <div class="vl">
                    <span class="vl-innertext"></span>
                </div>
                <div class="col">
                    <input type="text" class="form_input" id="username_re" placeholder="账号" required>
                    <input type="tel" class="form_input" id="telephone_re" placeholder="手机号" required>
                </div>
                <div class="col">
                    <input type="password" class="form_input" name="password1_re" id="password1_re" placeholder="新密码" required>
                    <input type="password" class="form_input" name="password2_re" id="password2_re" placeholder="确认密码" required>
                    <button type="submit" class="form_button" id="resetPwd_button">重置密码</button>
                </div>
                <div class="col1">
                    <a class="form_link login_link" id="restPwd2login">（&nbsp;&nbsp;返回登录&nbsp;&nbsp;）</a>
                </div>
                <div class="col1">
                    <a class="form_link logon_link" id="resPwd2logon">（&nbsp;&nbsp;注册账号&nbsp;&nbsp;）</a>
                </div>
            </div>
        </form>
    </div>

</div>
<div id="space_area">
    <a id="space_link" href="https://space.bilibili.com/688055875?spm_id_from=333.1007.0.0">to My Space</a>
</div>
</body>
</html>
